// 预览图片

export default function previewImage (target: HTMLImageElement) {
    let requestID: any = null
    const html = document.documentElement
    // 1、获取图片的大小及位置
    const rect = target.getBoundingClientRect()
    // 缓存个的dispaly
    const opacity = target.style.getPropertyValue('opacity')
    target.style.setProperty('opacity', '0')
    
    // 2、创建一个属性相同的元素
    const img = createElement('img', {
        position: 'fixed',
        width: `${rect.width}px`,
        height: `${rect.height}px`,
        left: `${rect.left}px`,
        top: `${rect.top}px`,
        transition: 'all .3s cubic-bezier(.2,0,.2,1)'
    }) as HTMLImageElement
    img.src = target.src
    // 将图片添加到body中
    document.body.append(img)

    const mask = createElement('div', {
        position: 'fixed',
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
        'background-color': 'rgba(0,0,0,.3)'
    })
    document.body.append(mask)

    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    const ch = img.clientHeight
    // 视口大小
    // const { clientHeight, clientWidth } = html
    const clientHeight = html.clientHeight * 0.9
    const clientWidth = html.clientWidth * 0.9
    // 获取图片的实际高度
    const im = new Image()
    im.src = target.src
    im.onload = () => {
    const { width, height } = im
    let newWidth = width
    let newHeight = height
        // 宽高比
        const rate =  width / height
        if (rate > 1) { // 宽屏
            if (width > clientWidth) {
                // 缩放系数
                const r =  clientWidth / width
                newWidth = r * width
                newHeight = newWidth / (width / height)
            }
        } else { // 窄屏
            // eslint-disable-next-line no-lonely-if
            if (height > clientHeight) {
                const r =  clientHeight / height
                newHeight = r * height
                newWidth = (width / height) * newHeight
            }
        }
        const left = (html.clientWidth - newWidth) / 2
        const top = (html.clientHeight - newHeight) / 2
        img.style.setProperty('width', `${newWidth}px`)
        img.style.setProperty('height', `${newHeight}px`)
        img.style.setProperty('left', `${left}px`)
        img.style.setProperty('top', `${top}px`)
        img.style.setProperty('z-index', '99999')
    }

    mask.addEventListener('click', () => {
        destory()
    })
    const handlerScroll = () => {
        function run () {
            destory()
            requestID = requestAnimationFrame(run)
        }
        requestID = requestAnimationFrame(run)
    }
    window.addEventListener('scroll', handlerScroll)
    function destory () {
        const rect = target.getBoundingClientRect()
        img.style.setProperty('width', `${rect.width}px`)
        img.style.setProperty('height', `${rect.height}px`)
        img.style.setProperty('left', `${rect.left}px`)
        img.style.setProperty('top', `${rect.top}px`)
        img.style.setProperty('z-index', 'initial')
        mask.parentNode?.removeChild(mask) 
        setTimeout(() => {
            target.style.setProperty('opacity', opacity)
            img.parentNode?.removeChild(img) 
            cancelAnimationFrame(requestID)
        }, 350)
        window.removeEventListener('scroll', handlerScroll)
    }

}

function createElement (eleStr: string, styles: object = {}) {
    const el = document.createElement(eleStr)
    Object.entries(styles).forEach(([key, value]) => {
        el.style.setProperty(key, value)
    })
    return el
}

